import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 1000 ? 1600 : 800
    height: Screen.height > 1000 ? 2560 : 741
    visible: true
    title: "animationTest"
    
    // 根据屏幕大小计算缩放因子
    readonly property real scaleFactor: width > 1000 ? 2.0 : 1.0
    
    Item {
        id: contentItem
        anchors.fill: parent
        
        Rectangle {
            anchors.fill: parent
            color: "#f0f0f0"
        
        // 移动动画标签 (label) - 位置: 768, 640, 100x100
        // 使用Item作为位置容器，匹配原始C++逻辑：单个QPropertyAnimation控制pos
        Item {
            id: moveLabelContainer
            x: 768 * scaleFactor
            y: 640 * scaleFactor
            width: 100 * scaleFactor
            height: 100 * scaleFactor
            
            Image {
                anchors.fill: parent
                source: "qrc:/animationTest/qrc/th-c1.png"
                fillMode: Image.PreserveAspectFit
            }
        }
        
        // 阴影效果标签 (label_shadowEffect) - 位置: 60, 50, 100x100, 圆形
        Item {
            id: shadowContainer
            x: 60 * scaleFactor
            y: 50 * scaleFactor
            width: 100 * scaleFactor
            height: 100 * scaleFactor
            
            property real shadowRadius: 0
            
            // 使用多层 Rectangle 创建更好的阴影效果（匹配原始 QGraphicsDropShadowEffect）
            // 原始代码：QColor(0, 0, 139) - 深蓝色
            Repeater {
                model: 20
                Rectangle {
                    anchors.centerIn: parent
                    // 阴影从内到外逐渐扩大
                    width: parent.width + shadowContainer.shadowRadius * 2 * (index / 20.0)
                    height: parent.height + shadowContainer.shadowRadius * 2 * (index / 20.0)
                    radius: 50 * scaleFactor + shadowContainer.shadowRadius * (index / 20.0)
                    // 黑色阴影，降低透明度（从0.3改为0.15），透明度随半径和层级递减（最大半径为50）
                    color: Qt.rgba(0, 0, 0, Math.max(0, 0.15 * (1 - index / 20.0) * (shadowContainer.shadowRadius / (50 * scaleFactor))))
                    visible: shadowContainer.shadowRadius > 0
                    z: -index - 1
                }
            }
            
            // 主圆形 (图片: th-c11.png)
            Image {
                anchors.centerIn: parent
                width: 100 * scaleFactor
                height: 100 * scaleFactor
                source: "qrc:/animationTest/qrc/th-c11.png"
                fillMode: Image.PreserveAspectFit
                z: 1
            }
            
            SequentialAnimation on shadowRadius {
                id: shadowAnimation
                running: false
                loops: Animation.Infinite
                NumberAnimation {
                    from: 0
                    to: 50 * scaleFactor  // 减小阴影面积，从100改为50
                    duration: 1000
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 50 * scaleFactor  // 减小阴影面积，从100改为50
                    to: 0
                    duration: 1000
                    easing.type: Easing.InOutQuad
                }
            }
        }
        
        // 头像闪烁标签 (label_shadowEffect_2) - 位置: 60, 210, 100x100, 圆形
        Image {
            id: opacityEffectLabel
            x: 60 * scaleFactor
            y: 210 * scaleFactor
            width: 100 * scaleFactor
            height: 100 * scaleFactor
            source: "qrc:/animationTest/qrc/th-c4.png"
            fillMode: Image.PreserveAspectFit
            
            SequentialAnimation on opacity {
                id: opacityEffectAnimation
                running: false
                loops: Animation.Infinite
                NumberAnimation {
                    from: 1.0
                    to: 0.0
                    duration: 300
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 0.0
                    to: 1.0
                    duration: 300
                    easing.type: Easing.InOutQuad
                }
            }
        }
        
        // 旋转标签 (label_rotation) - 位置: 60, 390, 100x100
        RotationLabel {
            id: rotationLabel
            x: 60 * scaleFactor
            y: 390 * scaleFactor
            width: 100 * scaleFactor
            height: 100 * scaleFactor
            imageSource: "qrc:/animationTest/qrc/th-c13.png"
        }
        
        // 曲线运动标签 (label_curvilinear) - 位置: 920, 500, 100x100
        Image {
            id: curveLabel
            width: 100 * scaleFactor
            height: 100 * scaleFactor
            x: 920 * scaleFactor
            y: 500 * scaleFactor
            source: "qrc:/animationTest/qrc/th-c12.png"
            fillMode: Image.PreserveAspectFit
        }
        
        // 连击动画 (widget_comBo) - 位置: 730, 70, 350x150
        ComBo {
            id: comboAnimation
            x: 730 * scaleFactor
            y: 70 * scaleFactor
            width: 350 * scaleFactor
            height: 150 * scaleFactor
        }
        
        // 按钮栏 - 所有按钮都在 y=10
        // 1. 阴影动画按钮 (pushButton5) - x=180
        Button {
            x: 180 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "阴影动画"
            onClicked: shadowAnimation.running = !shadowAnimation.running
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 2. 头像闪烁按钮 (pushButton7) - x=270
        Button {
            x: 270 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "头像闪烁"
            onClicked: opacityEffectAnimation.running = !opacityEffectAnimation.running
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 3. 淡化动画按钮 (pushButton3) - x=360
        Button {
            x: 360 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "淡化动画"
            onClicked: startOpacityAnimation()
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 4. 移动动画按钮 (pushButton2) - x=450
        Button {
            x: 450 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "移动动画"
            onClicked: toggleMoveAnimation()
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 5. 爆开动画按钮 (pushButton) - x=540
        Button {
            x: 540 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "爆开动画"
            onClicked: startPopAnimation()
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 6. 旋转动画按钮 (pushButton4) - x=630
        Button {
            x: 630 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "旋转动画"
            onClicked: rotationLabel.toggleAnimation()
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 7. 曲线运动按钮 (pushButton6) - x=720
        Button {
            x: 720 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "曲线运动"
            onClicked: startCurveAnimation()
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        
        // 8. 连击动画按钮 (pushButton8) - x=810
        Button {
            x: 810 * scaleFactor
            y: 10 * scaleFactor
            width: 75 * scaleFactor
            height: 32 * scaleFactor
            text: "连击动画"
            onClicked: comboAnimation.increment()
            
            background: Rectangle {
                color: parent.pressed ? "#00D4B8" : "#01EEC3"
                radius: 16 * scaleFactor
            }
            
            contentItem: Text {
                text: parent.text
                font.pixelSize: 12 * scaleFactor
                font.family: "微软雅黑"
                color: "#212426"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        }
    }
    
    property bool moveAnimationPaused: false
    property bool moveAnimationStarted: false  // 标记动画是否已启动过
    
    // 移动动画控制函数（精确匹配原始C++逻辑：sltStartHideAnimation）
    function toggleMoveAnimation() {
        // 如果正在运行，暂停（匹配原始C++：if (Running) pause()）
        if (moveParallelAnimation.running) {
            moveParallelAnimation.pause()
            moveAnimationPaused = true
            return
        }
        
        // 如果已暂停，使用 start() 恢复（匹配原始C++：if (Paused) start()）
        if (moveAnimationPaused) {
            moveAnimationPaused = false
            moveParallelAnimation.start()
            return
        }
        
        // 如果动画已启动过但已完成（Stopped状态），继续下一个移动
        if (moveAnimationStarted) {
            continueMoveAnimation()
            return
        }
        
        // 第一次启动：从当前位置移动到 (247, y)（匹配原始C++：setStartValue/setEndValue + start()）
        moveAnimationStarted = true
        var currentX = moveLabelContainer.x
        var currentY = moveLabelContainer.y
        
        moveXAnimation.from = currentX
        moveXAnimation.to = 247 * scaleFactor
        moveYAnimation.from = currentY
        moveYAnimation.to = currentY
        
        moveParallelAnimation.start()
    }
    
    // 继续移动动画（精确匹配原始C++逻辑：sltMoveChanged）
    function continueMoveAnimation() {
        // 清除暂停标志（动画完成时应该继续）
        moveAnimationPaused = false
        
        // 获取当前位置（匹配原始C++：auto posX = ui.label->x(); auto posY = ui.label->y();）
        var currentX = moveLabelContainer.x
        var currentY = moveLabelContainer.y
        var target247 = 247 * scaleFactor
        var target768 = 768 * scaleFactor
        var target120 = 120 * scaleFactor
        var target640 = 640 * scaleFactor
        
        // 使用更大的容差来判断位置（因为可能有缩放和浮点数误差）
        var tolerance = 5 * scaleFactor
        
        // 根据当前位置决定下一个位置（精确匹配原始C++逻辑：sltMoveChanged中的if判断）
        var nextX = currentX
        var nextY = currentY
        
        if (Math.abs(currentX - target247) < tolerance && Math.abs(currentY - target640) < tolerance) {
            // 当前位置：(247, 640)，下一个目标：向上移动到 (247, 120)
            // 匹配原始C++：if (247 == posX && 640 == posY) setEndValue(QPoint(posX, 120))
            nextX = currentX
            nextY = target120
        } else if (Math.abs(currentX - target247) < tolerance && Math.abs(currentY - target120) < tolerance) {
            // 当前位置：(247, 120)，下一个目标：向右移动到 (768, 120)
            // 匹配原始C++：if (247 == posX && 120 == posY) setEndValue(QPoint(768, posY))
            nextX = target768
            nextY = currentY
        } else if (Math.abs(currentX - target768) < tolerance && Math.abs(currentY - target120) < tolerance) {
            // 当前位置：(768, 120)，下一个目标：向下移动到 (768, 640)
            // 匹配原始C++：if (768 == posX && 120 == posY) setEndValue(QPoint(posX, 640))
            nextX = currentX
            nextY = target640
        } else if (Math.abs(currentX - target768) < tolerance && Math.abs(currentY - target640) < tolerance) {
            // 当前位置：(768, 640)，下一个目标：向左移动到 (247, 640)
            // 匹配原始C++：if (768 == posX && 640 == posY) setEndValue(QPoint(247, posY))
            nextX = target247
            nextY = currentY
        } else {
            // 如果不在任何目标位置，移动到最近的第一个目标 (247, y)
            // 优先移动到 (247, currentY)，如果已经在247，则移动到 (247, 640)
            if (Math.abs(currentX - target247) < tolerance) {
                nextX = currentX
                nextY = target640
            } else {
                nextX = target247
                nextY = currentY
            }
        }
        
        // 设置动画值（匹配原始C++逻辑：setStartValue 和 setEndValue）
        moveXAnimation.from = currentX
        moveXAnimation.to = nextX
        moveYAnimation.from = currentY
        moveYAnimation.to = nextY
        
        // 启动动画（匹配原始C++逻辑：if (Stopped == state()) start()）
        // 注意：QML的PropertyAnimation在finished后会自动变为Stopped状态，所以直接start()即可
        moveParallelAnimation.start()
    }
    
    // 使用 ParallelAnimation 同时控制 x 和 y（匹配原始C++逻辑：单个QPropertyAnimation控制pos）
    ParallelAnimation {
        id: moveParallelAnimation
        
        PropertyAnimation {
            id: moveXAnimation
            target: moveLabelContainer
            property: "x"
            duration: 2000
        }
        
        PropertyAnimation {
            id: moveYAnimation
            target: moveLabelContainer
            property: "y"
            duration: 2000
        }
        
        onFinished: {
            // 动画完成后继续下一个移动
            if (!moveAnimationPaused) {
                continueMoveAnimation()
            }
        }
    }
    
    // 曲线运动动画（精确匹配原始路径）
    function startCurveAnimation() {
        if (curveAnimation.running) return
        
        curveLabel.x = 920 * scaleFactor
        curveLabel.y = 500 * scaleFactor
        curveAnimation.start()
    }
    
    SequentialAnimation {
        id: curveAnimation
        
        ParallelAnimation {
            PropertyAnimation {
                target: curveLabel
                property: "x"
                from: 920 * scaleFactor
                to: 500 * scaleFactor
                duration: 750
            }
            PropertyAnimation {
                target: curveLabel
                property: "y"
                from: 500 * scaleFactor
                to: 300 * scaleFactor
                duration: 750
            }
        }
        
        ParallelAnimation {
            PropertyAnimation {
                target: curveLabel
                property: "x"
                from: 500 * scaleFactor
                to: 310 * scaleFactor
                duration: 750
            }
            PropertyAnimation {
                target: curveLabel
                property: "y"
                from: 300 * scaleFactor
                to: 270 * scaleFactor
                duration: 750
            }
        }
    }
    
    // 淡化动画（在当前窗口内创建Item）
    function startOpacityAnimation() {
        if (!contentItem) {
            return
        }
        var fadeItem = fadeItemComponent.createObject(contentItem)
        if (fadeItem) {
            fadeItem.startFade()
        }
    }
    
    Component {
        id: fadeItemComponent
        
        Item {
            id: fadeItem
            anchors.fill: parent
            z: 1000
            
            function startFade() {
                fadeAnimation.start()
            }
            
            Rectangle {
                anchors.fill: parent
                color: "transparent"
                
                Image {
                    anchors.centerIn: parent
                    width: 100 * root.scaleFactor
                    height: 100 * root.scaleFactor
                    source: "qrc:/animationTest/qrc/th-c1.png"
                    fillMode: Image.PreserveAspectFit
                }
            }
            
            SequentialAnimation {
                id: fadeAnimation
                
                PropertyAnimation {
                    target: fadeItem
                    property: "opacity"
                    from: 1.0
                    to: 0.0
                    duration: 3000
                }
                
                onFinished: {
                    fadeItem.destroy()
                }
            }
        }
    }
    
    // 爆开动画
    function startPopAnimation() {
        if (!contentItem) {
            return
        }
        
        // 创建新的弹出动画实例（不触发连击动画）
        var popItem = popAnimationComponent.createObject(contentItem)
        if (popItem) {
            popItem.startAnimation()
        }
    }
    
    Component {
        id: popAnimationComponent
        
        PopAnimation {
            anchors.fill: parent
            animationNum: 12
            z: 1000
            scaleFactor: root.scaleFactor
            
            onAnimationRunningChanged: {
                if (!animationRunning) {
                    // 动画完成后自动销毁
                    Qt.callLater(function() {
                        destroy()
                    })
                }
            }
        }
    }
}
